<template>
  <div class="chart">
    <div v-if="widgetData.value.bgImg !== ''" class="titleBox">
      <div class="img"><img :src="widgetData.value.bgImg"></div>
      <div class="title"><span>{{ widgetData.value.title }}</span></div>
    </div>
    <div v-else class="titleBox">
      <!-- <i class="el-icon-picture"></i> -->
      <div class="title"><span>{{ widgetData.value.title }}</span></div>
    </div>
    <div :style="{ width: w + 'px', height: (h - 40) + 'px' }" id="radarChart"></div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['widgetData'],
  computed: {
    w() {
      let width = parseInt(this.widgetData.style.w / 4 * 3);
      return width
    },
    h() {
      let height = parseInt(this.widgetData.style.h / 4 * 3);
      return height
    }
  },
  data() {
    return {
      chartData: this.widgetData.value.chartData,
    }
  },
  watch: {},
  created() { },
  mounted() {
    this.getEchart();
  },
  methods: {
    getEchart() {
      let chartDom = document.getElementById("radarChart");
      let chart = this.$echarts.init(chartDom);
      let indicator = [];
      const xData = this.chartData.xData;
      const yData1 = this.chartData.yData1;
      const yData2 = this.chartData.yData2;
      const yData3 = this.chartData.yData3;
      for (let i = 0; i < xData.length && i < yData1.length; i++) {
        const obj = {
          name: xData[i],
          max: 100
        };
        indicator.push(obj);
      }

      let option = {
        radar: {
          center: ["50%", "50%"],
          radius: '80%',
          name: {
            textStyle: {
              color: '#fff',
              fontSize: 16,
              fontWeight: 400,
              fontFamily: 'PingFangSC-Regular,PingFang SC',
              fontStyle: 'normal',
            }
          },
          nameGap: '2',
          indicator: indicator,
          splitArea: {
            show: false,
          },
          axisLabel: {//展示刻度
            show: false,
          },
          axisLine: {//指向外圈文本的分隔线样式
            lineStyle: {
              color: 'rgba(0,0,0,1)',
            },
          },
          splitLine: {
            lineStyle: {
              width: 2,
              color: ['rgba(45,65,110, 0.6)'].reverse(),
            },
          },
        },
        series: [
          {
            type: 'radar',
            symbolSize: 0,
            data: [yData3],
            areaStyle: {
              color: '#FFAC28', // 调色盘颜色列表。
              opacity: 0.4,
            },
            lineStyle: {
              normal: {
                color: '#FFAC28',
                width: 1,
              },
            },
          }
        ]
      };

      // 大屏适配
      window.addEventListener("resize", function () {
        chart.resize();
      });
      chart.setOption(option);
    }
  },
}
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;

  span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .titleBox {
    width: 100%;
    height: 40px;
    position: relative;

    .img {
      width: 100%;
      height: 40px;
      position: absolute;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .title {
      position: absolute;
      width: 100%;
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 13px;
      font-size: 18px;
      color: #FFFFFF;
      background-color: #000;
    }

    .el-icon-picture {
      width: 100%;
      height: 40px;
      position: absolute;
      font-size: 3.125rem;
      background: #ffffff;
      color: #c1c1c1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>